<template>
  <div class="scroll">
    <el-breadcrumb class="ml-10px mt-40px" separator="/">
      <el-breadcrumb-item class="font-size-4" :to="{ path: '/subscribe/subscribeList' }">征订管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{ subTitle }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="mt-40px pl-10px pr-10px pb-20px bg-white border-rd-10px">
      <el-row>
        <el-col :span="6">
          <el-anchor :container="containerRef" direction="vertical" type="default" :offset="30" @click="handleClick">
            <el-anchor-link href="#part1" title="基本信息" />
            <el-anchor-link href="#part2" title="时间/配送" />
            <el-anchor-link href="#part3" title="用户端展示" />
            <el-anchor-link href="#part4" title="学生信息收集" />
          </el-anchor>
        </el-col>
        <el-col :span="18">
          <el-form
            ref="ruleFormRef"
            style="max-width: 900px"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
          >
            <div ref="containerRef" style="height: 80vh; overflow-y: auto">
              <el-card id="part1" class="mt-20px" header="基本信息" shadow="never">
                <el-form-item label="征订名称" prop="name">
                  <el-input v-model="ruleForm.name" placeholder="请输入征订名称" />
                </el-form-item>
                <el-form-item label="征订副标题">
                  <el-input v-model="ruleForm.subName" placeholder="请输入征订副标题" />
                </el-form-item>
                <el-form-item label="征订编码">
                  <div>
                    <el-space class="flex">
                      <el-input v-model="ruleForm.code" placeholder="请输入征订编码" />
                      <el-button type="primary" size="default" @click="handleAddCode">添加</el-button>
                    </el-space>
                    <div class="color-#a9a9a9 font-size-12px">用户可输入征订编码进入征订，征订编码可添加多个</div>
                    <el-space>
                      <el-tag v-for="tag in tags" :key="tag" closable @close="handleCloseTag(tag)">
                        {{ tag }}
                      </el-tag>
                    </el-space>
                  </div>
                </el-form-item>
                <el-form-item label="征订类型">
                  <el-radio-group v-model="ruleForm.type">
                    <el-radio value="1" size="small" border>统购</el-radio>
                    <el-radio value="2" size="small" border>零售</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item v-if="ruleForm.type == 1" label="关联零售">
                  <el-select
                    v-model="ruleForm.gl"
                    filterable
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                    placeholder="请选择关联零售"
                  />
                  <div class="color-#a9a9a9 font-size-12px">
                    若选择了关联的零售，则在该征订入口显示统购及零售2个入口供用户选择
                  </div>
                </el-form-item>
                <el-form-item label="征订学校" prop="school">
                  <div @click="handleChooseSchool">
                    <el-badge :value="schoolData.length" class="item">
                      <el-button>
                        <span v-if="schoolData.length == 0">暂未选择学校班级</span>
                        <span v-else>
                          <template v-for="item in schoolData">
                            {{ item.name }},
                          </template>
                        </span>
                      </el-button>
                    </el-badge>
                    <div class="color-#a9a9a9 font-size-12px">若没有学校请到校园管理中添加</div>
                  </div>
                </el-form-item>
                <el-form-item label="是否允许多次购买">
                  <div>
                    <el-switch v-model="ruleForm.dcgm" />
                    <div class="color-#a9a9a9 font-size-12px">若关闭，则一个学生本次征订只允许下单一次。</div>
                  </div>
                </el-form-item>
                <el-form-item label="是否公开">
                  <div>
                    <el-switch v-model="ruleForm.gk" />
                    <div class="color-#a9a9a9 font-size-12px">
                      若设置为公开，则该征订入口将直接在小程序端显示
                      <el-popover
                        placement="top-start"
                        :width="200"
                        trigger="hover"
                        content="this is content, this is content, this is content"
                      >
                        <template #reference>
                          <a class="color-#2180ff ml-5px">查看效果</a>
                        </template>
                      </el-popover>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="商品">
                  <div>
                    <el-radio-group v-model="ruleForm.goods">
                      <el-radio-button label="学校商品" :value="1" />
                      <el-radio-button label="指定商品" :value="2" />
                      <el-radio-button label="固定金额" :value="3" />
                    </el-radio-group>
                  </div>
                </el-form-item>
                <el-form-item v-if="ruleForm.goods === 2" label=" ">
                <ApointedGoods ref="ApointedGoodsRef" />
                </el-form-item>
                <el-form-item v-if="ruleForm.goods === 3" label=" ">
                  <div class="flex items-center">
                    <span class="mr-10px w-80px">设置金额</span>
                    <el-input v-model="ruleForm.money" placeholder="请输入金额" />
                    <span>元</span>
                  </div>
                </el-form-item>
                <el-form-item label="征订公告">
                  <EditorModel ref="EditorModelRef" />
                  <div class="color-#a9a9a9 font-size-12px">内容可以为告家长书，征订注意事项等</div>
                </el-form-item>
              </el-card>
              <el-card id="part2" class="mt-20px" header="时间/配送" shadow="never">
                <el-form-item label="征订起止时间">
                  <el-date-picker
                    v-model="ruleForm.date1"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="YYYY-MM-DD HH:mm:ss"
                    date-format="YYYY-MM-DD dd"
                    time-format="HH:mm:ss"
                  />
                  <div class="color-#a9a9a9 font-size-12px">
                    注：设置征订开始时间和结束时间，时间到了后，将自动开启征订和结束征订。
                  </div>
                </el-form-item>
                <el-form-item label="修改信息起止时间">
                  <el-date-picker
                    v-model="ruleForm.date2"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="YYYY-MM-DD HH:mm:ss"
                    date-format="YYYY-MM-DD dd"
                    time-format="HH:mm:ss"
                  />
                  <div class="color-#a9a9a9 font-size-12px">
                    设置修改商品信息开始时间和结束时间，家长只能在设置的时间范围内修改商品信息。
                  </div>
                </el-form-item>
                <el-form-item label="修改商品信息起止时间">
                  <el-date-picker
                    v-model="ruleForm.date3"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="YYYY-MM-DD HH:mm:ss"
                    date-format="YYYY-MM-DD dd"
                    time-format="HH:mm:ss"
                  />
                  <div class="color-#a9a9a9 font-size-12px">
                    设置售后开始时间和结束时间，家长只能在设置的时间范围内申请售后
                  </div>
                </el-form-item>
                <el-form-item label="售后起止时间">
                  <el-date-picker
                    v-model="ruleForm.date4"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="YYYY-MM-DD HH:mm:ss"
                    date-format="YYYY-MM-DD dd"
                    time-format="HH:mm:ss"
                  />
                  <div class="color-#a9a9a9 font-size-12px">
                    注：设置修改信息开始时间和结束时间，家长只能在设置的时间范围内修改信息。
                  </div>
                </el-form-item>
                <el-form-item label="预计发货时间" prop="days">
                  <div>
                    <el-input v-model="ruleForm.days" type="number" placeholder="请输入预计发货时间" />
                    <div class="color-#a9a9a9 font-size-12px">
                      如：下单后3天后发货、2022-08-08等。填写此项可以大幅减少因未发货导致的投诉。
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="配送方式" prop="psfs">
                  <div>
                    <el-select v-model="ruleForm.psfs" collapse-tags multiple>
                      <el-option label="统一配送到校" value="1" />
                      <el-option label="京东快递" value="2" />
                      <el-option label="已发货，只收款" value="3" />
                    </el-select>
                    <div class="color-#a9a9a9 font-size-12px">若没有配送方式请到订单管理中增加配送方式</div>
                  </div>
                </el-form-item>
              </el-card>
              <el-card id="part3" class="mt-20px" header="用户端展示" shadow="never">
                <el-form-item label="征订码类型">
                  <el-radio-group v-model="ruleForm.codeType">
                    <el-radio value="1" size="small" border>小程序码</el-radio>
                    <el-radio value="2" size="small" border>公众号</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="征订入口">
                  <div>
                    <el-radio-group v-model="ruleForm.inlet">
                      <el-radio-button :value="1" size="small">商品列表</el-radio-button>
                      <el-radio-button :value="2" size="small">自主录入学生信息</el-radio-button>
                      <el-radio-button :value="3" size="small">通过编号绑定</el-radio-button>
                      <el-radio-button :value="4" size="small">单页缴费</el-radio-button>
                    </el-radio-group>
                    <div class="mt-10px flex items-center justify-between w-500px">
                      <div :class="ruleForm.inlet == 1 ? 'active-item' : ''">
                        <el-popover width="300" trigger="hover">
                          <template #reference>
                            <img class="w-100px" src="@/assets/mode1.png" />
                          </template>
                          <img class="w-250px" src="@/assets/mode1.png" />
                        </el-popover>
                      </div>
                      <div :class="ruleForm.inlet == 2 ? 'active-item' : ''">
                        <el-popover width="300" trigger="hover">
                          <template #reference>
                            <img class="w-100px" src="@/assets/mode2.png" />
                          </template>
                          <img class="w-250px" src="@/assets/mode2.png" />
                        </el-popover>
                      </div>
                      <div :class="ruleForm.inlet == 3 ? 'active-item' : ''">
                        <el-popover width="300" trigger="hover">
                          <template #reference>
                            <img class="w-100px" src="@/assets/mode3.png" />
                          </template>
                          <img class="w-250px" src="@/assets/mode3.png" />
                        </el-popover>
                      </div>
                      <div :class="ruleForm.inlet == 4 ? 'active-item' : ''">
                        <el-popover width="300" trigger="hover">
                          <template #reference>
                            <img class="w-100px" src="@/assets/mode4.png" />
                          </template>
                          <img class="w-250px" src="@/assets/mode4.png" />
                        </el-popover>
                      </div>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="列表显示方式">
                  <el-space :size="30">
                    <img
                      class="w-120px h-180px"
                      :class="chooseVal == 1 ? 'active-item' : ''"
                      src="@/assets/list0.jpg"
                      @click="handleChooseList(1)"
                    />
                    <img
                      class="w-120px h-180px"
                      :class="chooseVal == 2 ? 'active-item' : ''"
                      src="@/assets/list1.jpg"
                      @click="handleChooseList(2)"
                    />
                  </el-space>
                </el-form-item>
                <el-form-item label="支付成功提示">
                  <el-input v-model="ruleForm.subName" placeholder="请输入支付成功提示" />
                  <div class="color-#a9a9a9 font-size-12px">内容可以为预计发货时间，给家长的提醒等</div>
                </el-form-item>
                <el-form-item label="超出售后时间提示">
                  <el-input v-model="ruleForm.subName" placeholder="请输入超出售后时间提示" />
                  <div class="color-#a9a9a9 font-size-12px">当用户超过售后截止时间申请售后时，弹出的提醒</div>
                </el-form-item>
                <el-form-item label="公告通知">
                  <el-input v-model="ruleForm.subName" placeholder="请输入公告通知" />
                  <div class="color-#a9a9a9 font-size-12px">配置后，将在商城列表页面显示公告通知信息</div>
                </el-form-item>
                <el-form-item label="公告通知">
                  <el-switch />
                  <div class="color-#a9a9a9 font-size-12px">
                    开启后，购买征订商品，商品加入购物车的情况下，不关闭商品选择器，可继续选择商品加入购物车
                  </div>
                </el-form-item>
              </el-card>
              <el-card id="part4" class="mt-20px" header="学生信息收集" shadow="never">
                <el-form-item label="学生信息必填项">
                  <div>
                    <el-select v-model="ruleForm.xsxx" class="!w-300px" collapse-tags multiple>
                      <el-option label="照片" value="1" />
                      <el-option label="座号/学号" value="2" />
                      <el-option label="身份证号" value="3" />
                      <el-option label="体型" value="4" />
                      <el-option label="身高" value="5" />
                      <el-option label="体重" value="6" />
                      <el-option label="胸围" value="7" />
                      <el-option label="腰围" value="8" />
                      <el-option label="臀围" value="9" />
                    </el-select>
                    <div class="color-#a9a9a9 font-size-12px">填写学生信息时的必填项</div>
                  </div>
                </el-form-item>
                <el-form-item label="学生信息隐藏项">
                  <div>
                    <el-select v-model="ruleForm.xsxx" class="!w-300px" collapse-tags multiple>
                      <el-option label="性别" value="0" />
                      <el-option label="照片" value="1" />
                      <el-option label="座号/学号" value="2" />
                      <el-option label="身份证号" value="3" />
                      <el-option label="体型" value="4" />
                      <el-option label="身高" value="5" />
                      <el-option label="体重" value="6" />
                      <el-option label="胸围" value="7" />
                      <el-option label="腰围" value="8" />
                      <el-option label="臀围" value="9" />
                      <el-option label="联系号码" value="10" />
                    </el-select>
                    <div class="color-#a9a9a9 font-size-12px">无需填写且不显示的项目</div>
                  </div>
                </el-form-item>
                <el-form-item label="学生编号别名">
                  <el-input v-model="ruleForm.subName" placeholder="请输入学生编号别名" />
                  <div class="color-#a9a9a9 font-size-12px">
                    若未填写，用户端学生信息显示为“学号”，填写后则显示为具体填写的内容
                  </div>
                </el-form-item>
              </el-card>
            </div>
            <div class="text-center mt-30px">
              <el-button type="primary" plain @click="submitForm(ruleFormRef)">重置</el-button>
              <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
            </div>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <chooseSchool ref="chooseSchoolRef" @school-data="getSchoolData" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import ApointedGoods from './components/apointGoods.vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import EditorModel from '@/views/subscribe/components/editorModel.vue'
import chooseSchool from '@/views/subscribe/components/chooseSchool.vue'
interface RuleForm {
  name: string
  subName: string
  code: string
  type: string
  gl: string
  school: string
  dcgm: boolean
  goods: number
  money: number
  date1: string[]
  date2: string[]
  date3: string[]
  date4: string[]
  days: number
  psfs: number[]
  codeType: number
  inlet: number
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  subName: '',
  code: '',
  date: [],
  type: '1',
  school: '',
  gl: [],
  dcgm: true,
  goods: 1,
  money: 0,
  date1: [],
  date2: [],
  date3: [],
  date4: [],
  days: '',
  psfs: [],
  codeType: 1,
  inlet: 1
})

const rules = reactive<FormRules<RuleForm>>({
  name: [
    {
      required: true,
      message: '请选择征订公告',
      trigger: 'change'
    }
  ],
  school: [
    {
      required: true,
      message: '请选择征订学校',
      trigger: 'change'
    }
  ],
  psfs: [
    {
      required: true,
      message: '请选择配送方式',
      trigger: 'change'
    }
  ],
  days: [
    {
      required: true,
      message: '请输入预计发货时间',
      trigger: 'blur'
    }
  ]
})
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // console.log('submit!')
    } else {
      // console.log('error submit!', fields)
    }
  })
}
const containerRef = ref<HTMLElement | null>(null)
const handleClick = (e: MouseEvent) => {
  e.preventDefault()
}
const route = useRoute()
const subTitle = ref('添加征订')
if (route.query.title === 'add') {
  subTitle.value = '添加征订'
} else if (route.query.title === 'edit') {
  subTitle.value = '编辑征订'
}
// 添加编码
const tags = ref([])
const handleAddCode = () => {
  if (tags.value.length > 0 && tags.value.include((item) => item === ruleForm.code)) {
    ElMessage.error('编码已存在')
  } else {
    tags.value.push(ruleForm.code)
  }
  ruleForm.code = ''
}
const handleCloseTag = (code) => {
  tags.value = tags.value.filter((item) => item !== code)
}
// 选择学校
const chooseSchoolRef = ref()
const handleChooseSchool = () => {
  chooseSchoolRef.value.open(true)
}
const chooseVal = ref(1)
const handleChooseList = (val) => {
  chooseVal.value = val
}
// 获取学校数据
const schoolData = ref([])
const getSchoolData = (val) => {
  // console.log(val)
  schoolData.value = val
}
</script>
<style lang="scss" scoped>
.active-item {
  border: 1px solid #397dfd;
}
</style>
